<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客户端1</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .mt_20 {
            margin-top: 20px;
        }

        .one .panel-body {
            padding: 0;
        }

        .panel-body textarea {
            border: none;
            outline: none;
            font-size: 16px;
            width: 100%;
            height: 400px;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div class="container mt_20">
        <div class="panel panel-default one">
            <div class="panel-heading">消息内容框</div>
            <div class="panel-body">
                <textarea id="content"></textarea>
            </div>
        </div>

        <div class="panel panel-default two">
            <div class="panel-heading">页面切换</div>
            <div class="panel-body">
                <button type="to_be_teacher" class="page_go btn btn-success mt_20">声明主控方</button>
                <button type="0" class="page_go btn btn-success mt_20">首页</button>
                <button type="1" class="page_go btn btn-success mt_20">课程练习</button>
                <button type="2" class="page_go btn btn-success mt_20">查字练习</button>
                <button type="3" class="page_go btn btn-success mt_20">碑贴练习</button>
                <button type="4" class="page_go btn btn-success mt_20">集字创作</button>
                <button type="5" class="page_go btn btn-success mt_20">书法空间</button>
            </div>
        </div>


        <div class="panel panel-default two">
            <div class="panel-heading">发送框</div>
            <div class="panel-body">
                <input id="sendMsg" class="form-control inline" style="display: inline;" type="text" />
                <button id="btn_send" class="btn btn-success mt_20">发送</button>
            </div>
        </div>
    </div>



    <br />


    <!-- 首先引入 socket.io 客户端脚本-->
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
    <script type="text/javascript">
        var socket = io.connect(
            'http://localhost:8888'); //连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
        // 监听 receiveMsg 事件，用来接收其他客户端推送的消息


        var socket_data;


        socket.on("register_server_to_app", function (data) {
            console.log(data, "======data=========");
            socket_data = data;
            content.value += JSON.stringify(socket_data) + "\r\n";
        });

        socket.on("teach_server_to_app", function (data) {
            console.log(data, "======data=========");
            socket_data = data;
            content.value += JSON.stringify(socket_data) + "\r\n";
        });



        var content = document.getElementById("content");
        var sendMsg = document.getElementById("sendMsg");
        var btn_send = document.getElementById("btn_send");


        btn_send.addEventListener("click", function () {
            var data = {
                header: socket_data.header,
                body: {
                    type: 1,
                    msg: content
                }
            };
            //给服务端发送 sendMsg事件名的消息
            socket.emit("teach_app_to_server", data);
            // content.value += data.client + ":" + data.msg + "\r\n";
            // sendMsg.value = "";
        });

        $('.page_go').on("click", function () {

            var pgea_id = $(this).attr('type');

            if (pgea_id == "to_be_teacher") {
                var data = {
                    header: socket_data.header,
                    body: {
                        content: '888'
                    }
                };
                //给服务端发送 sendMsg事件名的消息
                socket.emit("apply_to_be_teacher", data);
            } else {
                var data = {
                    header: socket_data.header,
                    body: {
                        type: "page_change",
                        content: pgea_id
                    }
                };
                //给服务端发送 sendMsg事件名的消息
                socket.emit("teach_app_to_server", data);
            }

        });
    </script>

</body>

</html>